<script setup>
import { onActivated, onMounted, onUnmounted, ref } from 'vue'

const count = ref(0)

onMounted(()=>{

console.log('mount a')
})

onUnmounted(()=>{
  console.log('unmount a')
})


onActivated(() => {
 console.log('active a')
})
</script>

<template>
  <p>Current component: A</p>
  <span>count: {{ count }}</span>
  <button @click="count++">+</button>
</template>